<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PDF Test Document</title>
  <style>
    /* 基础样式 */
    body {
      font-family: 'Arial', sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
    }

    /* 分页测试 */
    .page-break {
      page-break-before: always;
    }

    /* 复杂布局 */
    .container {
      display: flex;
      gap: 20px;
      margin-bottom: 30px;
    }

    /* 表格样式 */
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
    }

    th, td {
      border: 1px solid #ddd;
      padding: 12px;
      text-align: left;
    }

    tr:nth-child(even) {
      background-color: #f9f9f9;
    }

    /* 图片样式 */
    .image-section {
      text-align: center;
      margin: 20px 0;
    }

    img {
      max-width: 100%;
      height: auto;
      border: 1px solid #ccc;
      padding: 5px;
    }

    /* 响应式设计 */
    @media print {
      .screen-only {
        display: none;
      }
    }

    /* 特殊元素 */
    .watermark {
      opacity: 0.3;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 48px;
      color: #ccc;
    }

    /* 字体测试 */
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
    .custom-font {
      font-family: 'Roboto Slab', serif;
    }
  </style>
</head>
<body>
<!-- 水印 -->
<div class="watermark">CONFIDENTIAL</div>

<h1>PDF 测试文档</h1>

<div class="container">
  <div style="flex: 1">
    <h2>基础文本</h2>
    <p>这是一个用于测试PDF生成的段落。包含 <strong>加粗文本</strong>、<em>斜体文本</em> 和 <a href="https://example.com">超链接</a>。</p>
  </div>
  <div style="flex: 1">
    <h2>列表测试</h2>
    <ul>
      <li>无序列表项 1</li>
      <li>无序列表项 2</li>
      <li>无序列表项 3</li>
    </ul>
    <ol>
      <li>有序列表项 1</li>
      <li>有序列表项 2</li>
      <li>有序列表项 3</li>
    </ol>
  </div>
</div>

<h2>表格测试</h2>
<table>
  <thead>
  <tr>
    <th>姓名</th>
    <th>邮箱</th>
    <th>部门</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>张三</td>
    <td>zhangsan@example.com</td>
    <td>技术部</td>
  </tr>
  <tr>
    <td colspan="2">李四（合并单元格）</td>
    <td>市场部</td>
  </tr>
  </tbody>
</table>

<div class="page-break"></div>

<h2>分页测试</h2>
<div class="image-section">
  <img src="https://source.unsplash.com/random/800x600" alt="测试图片">
  <p>图片说明文字</p>
</div>

<h2 class="custom-font">自定义字体测试</h2>
<p class="custom-font">这段文字使用Google Fonts的Roboto Slab字体</p>

<div class="screen-only">
  <h2>响应式测试</h2>
  <p>这个部分在打印时应该不可见</p>
</div>

<h2>代码块测试</h2>
<pre><code>
function example() {
    console.log('代码块测试');
}
    </code></pre>
</body>
</html>
